<template>
    <div class="block">
        <el-carousel :interval="3000" arrow="always">
            <el-carousel-item v-for="(item,index) in bannerData" :key="item">
                <img :src="bannerData[index]">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import {reactive,toRefs} from "vue";

    export default {
        props: {
            bannerData: {
                type: Array,
                default(){
                    return[]
                }
            }
        },

        setup(){
            const state = reactive({
                imgArray: []
            })

            return{
                ...toRefs(state)
            }
        }
    }
</script>

<style scoped>
    /*el-carousel-item{*/
    /*    color: #475669;*/
    /*    font-size: 19px;*/
    /*    opacity: 0.75;*/
    /*    line-height: 300px;*/
    /*    margin: 0;*/
    /*}*/
    img{
        width: 100%;
        height: 300px;
    }

    .el-carousel{
        width: 100%;
        height: 230px;
        margin-top: 5%;
    }
    .el-carousel-item:nth-child(2n){
        background-color: #99a9bf;
    }
    .el-carousel-item:nth-child(2n+1){
        background-color: #d3dce6;
    }
</style>
